console.log('进入h01.js=============>');

// 通过id获取页面元素
let btn01 = document.getElementById('btn01');
let div01 = document.getElementById('div01');
console.log('页面元素：', btn01, div01);

// 点击事件
btn01.addEventListener('click', () => {
  // 创建元素
  let sp = document.createElement('span');
  sp.append('点击的时间：' + new Date().toLocaleString());
  // 追加到div01中
  div01.append(sp);
});

// 生日输入
let selNian = document.getElementById('selNian');
let selYue = document.getElementById('selYue');
let selDay = document.getElementById('selDay');

// <table style="ddd"></table> table叫做元素，style叫做属性

// 初始化年份的选项的function
function initNian() {
  let nian = new Date().getFullYear();

  // for(变量初始化区域;循环是否继续的逻辑表达式;每次循环完之后要执行的代码)
  // 这三段都可以省略,但是;不可省略
  // for(;;)
  for (let i = 1970; i <= nian; i++) {
    // 创建option
    let op = document.createElement('option');
    op.append(i);
    // 修改或者设置属性
    op.setAttribute('value', i);
    // 添加到年份列表
    selNian.append(op);
  }
}
// 调用年份初始化fucntion
initNian();

// 初始化月
function initYue() {
  for (let i = 1; i < 13; i++) {
    let op = document.createElement('option');
    op.append(i);
    op.setAttribute('value', i);
    selYue.append(op);
  }
}

initYue();

// 默认选中2000年6月
selNian.value = 2000;
selYue.value = 6;

// 日期数据填充
function initRi() {
  // 日期是要通过年月的值计算
  let nian = selNian.value;
  let yue = selYue.value;

  console.log('选中的年月：', nian, yue);
  // 计算日期
  let run = nian % 400 == 0 || (nian % 4 == 0 && nian % 100 != 0);
  // 默认就是31天
  let ri = 31;
  if (yue == 4 || yue == 6 || yue == 9 || yue == 12) {
    ri = 30;
  } else if (run && yue == 2) {
    ri = 29;
  } else if (yue == 2) {
    ri = 28;
  }
  // 重建日期选项
  selDay.innerHTML = '';
  for (let i = 1; i <= ri; i++) {
    let op = document.createElement('option');
    op.append(i);
    op.setAttribute('value', i);
    selDay.append(op);
  }
  // 默认选中15
  selDay.value = 15;
}

initRi();

// 年月变化都要触发日期的变化
selNian.addEventListener('change', initRi);
selYue.addEventListener('change', initRi);

// 参数=默认值，表示该参数不传就是默认值
function formatDate(date, format = 'yyyy-MM-dd hh:mm:ss') {
  console.log('参数信息：', date, format);
  let now = new Date();
  now = date;

  // 获取年月日时分秒的信息
  let y = now.getFullYear();
  let m = now.getMonth() + 1;
  let d = now.getDate();
  let h = now.getHours();
  let mm = now.getMinutes();
  let s = now.getSeconds();
  // 替换格式化字符串的内容为对应的时间信息
  let result = format.replace(/yyyy/g, y);
  result = result.replace(/MM/g, m);
  result = result.replace(/dd/g, d);
  result = result.replace(/hh/g, h);
  result = result.replace(/mm/g, mm);
  result = result.replace(/ss/g, s);

  return result;
}

let date = formatDate(new Date());
console.log('格式化结果：', date);

date = formatDate(new Date(), 'yyyy-MM-dd yyyy年');
console.log('格式化结果：', date);

date = formatDate(new Date(), 'hh:mm:ss');
console.log('格式化结果：', date);
